<!-- <template>
  <div class="pdf-viewer">
    <div class="pdf-controls" v-if="numPages > 0">
      <button @click="currentPage--" :disabled="currentPage <= 1">
        上一页
      </button>
      <span>第 {{ currentPage }} 页 / 共 {{ numPages }} 页</span>
      <button @click="currentPage++" :disabled="currentPage >= numPages">
        下一页
      </button>
      <span>缩放: </span>
      <select v-model="scale" @change="scaleChanged">
        <option value="0.5">50%</option>
        <option value="0.75">75%</option>
        <option value="1">100%</option>
        <option value="1.25">125%</option>
        <option value="1.5">150%</option>
        <option value="2">200%</option>
         <option value="5">500%</option>
      </select>
    </div>

    <pdf
      :src="pdfSrc"
      :page="currentPage"
      :scale="scale"
      @num-pages="numPages = $event"
      @error="onError"
      @progress="onProgress"
    ></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  name: "PdfViewer",
  components: {
    pdf,
  },
  props: {
    fileUrl: String,
  },
  data() {
    return {
      currentPage: 1,
      numPages: 0,
      scale: 1,
      pdfSrc: null,
      loading: false,
    };
  },
  watch: {
    fileUrl: {
      immediate: true,
      handler(newUrl) {
        if (newUrl) {
          this.pdfSrc = newUrl;
        }
      },
    },
  },
  methods: {
    onError(error) {
      console.error("PDF error:", error);
      this.$emit("error", "加载PDF失败: " + error.message);
    },
    onProgress(progress) {
      this.loading = progress < 1;
      this.$emit("loading", this.loading);
    },
    scaleChanged() {
    },
  },
};
</script>

<style scoped>
.pdf-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdf-controls {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.pdf-controls button {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.pdf-controls button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.pdf-controls select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style> -->



<template>
  <div class="pdf-viewer">
    <div class="pdf-controls" v-if="numPages > 0">
      <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ numPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= numPages">下一页</button>
      <span>缩放: </span>
      <select v-model="scale" @change="renderPage">
        <option value="0.5">50%</option>
        <option value="0.75">75%</option>
        <option value="1">100%</option>
        <option value="1.25">125%</option>
        <option value="1.5">150%</option>
        <option value="2">200%</option>
      </select>
    </div>

    <div class="pdf-container">
      <canvas ref="canvas"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PdfViewer',
  props: {
    fileUrl: String
  },
  data() {
    return {
      currentPage: 1,
      numPages: 0,
      scale: 1,
      pdfDoc: null,
      pdfjsLib: window.pdfjsLib || {}
    }
  },
  mounted() {
    this.initPdfJs()
  },
  watch: {
    fileUrl: {
      immediate: true,
      handler(newUrl) {
        if (newUrl) {
          this.loadPdf()
        }
      }
    }
  },
  methods: {
    initPdfJs() {
      if (typeof window !== 'undefined' && window.pdfjsLib) {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc =
          'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js'
      }
    },

    async loadPdf() {
      try {
        this.$emit('loading', true)

        const pdfjs = window.pdfjsLib || this.pdfjsLib
        if (!pdfjs.getDocument) {
          throw new Error('PDF.js未正确加载')
        }

        const loadingTask = pdfjs.getDocument(this.fileUrl)
        this.pdfDoc = await loadingTask.promise
        this.numPages = this.pdfDoc.numPages
        this.currentPage = 1

        await this.renderPage()
        this.$emit('loading', false)
      } catch (error) {
        console.error('Error loading PDF:', error)
        this.$emit('error', '加载PDF失败: ' + error.message)
        this.$emit('loading', false)
      }
    },

    async renderPage() {
      if (!this.pdfDoc) return

      try {
        const pdfjs = window.pdfjsLib || this.pdfjsLib
        const page = await this.pdfDoc.getPage(this.currentPage)
        const canvas = this.$refs.canvas
        const ctx = canvas.getContext('2d')

        // 应用缩放
        const viewport = page.getViewport({ scale: this.scale })

        canvas.width = viewport.width
        canvas.height = viewport.height

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }

        await page.render(renderContext).promise

      } catch (error) {
        console.error('Error rendering page:', error)
        this.$emit('error', '渲染页面失败: ' + error.message)
      }
    },

    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.renderPage()
      }
    },

    nextPage() {
      if (this.currentPage < this.numPages) {
        this.currentPage++
        this.renderPage()
      }
    }
  }
}
</script>

<style scoped>
.pdf-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

canvas {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
</style>
